<template>
    <div class="container">
      <!-- 其他内容保持不变 -->
  
      <!-- 法规列表展示 -->
      <a-card class="general-card" :title="$t('Regulation List')">
        <template #extra>
          <a-button type="primary" @click="createRegulation">Create New Regulation</a-button>
        </template>
        <a-list>
          <a-list-item v-for="regulation in regulations" :key="regulation.id">
            <a-list-item-meta
              :title="`Name: ${regulation.name}, Article: ${regulation.article_number}`"
              :description="regulation.title"
            />
            <template #actions>
              <a-button @click="editRegulation(regulation)">Edit</a-button>
              <a-button @click="deleteRegulation(regulation.id)">Delete</a-button>
            </template>
          </a-list-item>
        </a-list>
      </a-card>
  
      <!-- Create/Edit Regulation Modal -->
      <a-modal
        v-model:visible="regulationModalVisible"
        title="Regulation Details"
        @ok="saveRegulation"
        @cancel="regulationModalVisible = false"
      >
        <a-form :model="currentRegulation">
          <a-form-item label="Regulation Name">
            <a-input v-model="currentRegulation.name" />
          </a-form-item>
          <a-form-item label="Clause">
            <a-input v-model="currentRegulation.article_number" />
          </a-form-item>
          <a-form-item label="Title">
            <a-input v-model="currentRegulation.title" />
          </a-form-item>
          <a-form-item label="Model Application">
            <a-input v-model="currentRegulation.model_application" />
          </a-form-item>
          <a-form-item label="Reference">
            <a-textarea v-model="currentRegulation.content" rows="4" />
          </a-form-item>
        </a-form>
      </a-modal>
    </div>
  </template>
  
  <script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import axios from 'axios';
  import baseUrl from '../../../config';

  const regulations = ref([]); // 法规列表
  
  // 当前编辑的法规
  const currentRegulation = ref({
    id: '',
    name: '',
    article_number: '',
    title: '',
    model_application:'',
    content: ''
  });
  
  // 控制法规弹窗是否可见
  const regulationModalVisible = ref(false);
  
  // 获取法规列表
  const fetchRegulations = async () => {
    try {
      const response = await axios.get(`${baseUrl}/api/regulations/`);
      regulations.value = response.data;
    } catch (error) {
      console.error('Error fetching regulations:', error);
    }
  };
  
  // 创建新的法规
  const createRegulation = () => {
    currentRegulation.value = { id: '', name: '', article_number: '', title: '',model_application:'', content: '' };
    regulationModalVisible.value = true;
  };
  
  // 编辑法规
  const editRegulation = (regulation) => {
    currentRegulation.value = { ...regulation };
    regulationModalVisible.value = true;
  };
  
  // 保存法规（新建或编辑）
  const saveRegulation = async () => {
    const method = currentRegulation.value.id ? 'PUT' : 'POST';
    const url = currentRegulation.value.id
      ? `${baseUrl}/api/regulations/${currentRegulation.value.id}/`
      : `${baseUrl}/api/regulations/`;
  
    try {
      await axios({
        method,
        url,
        data: currentRegulation.value,
      });
      fetchRegulations();
      regulationModalVisible.value = false;
    } catch (error) {
      console.error('Error saving regulation:', error);
    }
  };
  
  // 删除法规
  const deleteRegulation = async (id) => {
    try {
      await axios.delete(`${baseUrl}/api/regulations/${id}/delete`);
      fetchRegulations();
    } catch (error) {
      console.error('Error deleting regulation:', error);
    }
  };
  
  onMounted(fetchRegulations);
  </script>
  
  <style scoped>
    .container {
      padding: 0 20px 40px 20px;
      overflow: hidden;
    }
  </style>
  